<template>
	<view class="address-info">
		<view class="address-form">
			<uni-forms ref="form" :model="formData" :rules="rules" :label-width="100" label-align="center">
				<uni-forms-item name="addressName" label="联系人:">
					<uni-easyinput v-model="formData.addressName" placeholder="请输入用户名" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="addressPhone" label="手机号:">
					<uni-easyinput v-model="formData.addressPhone" placeholder="请输入用户名" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="province" label="省份:">
					<picker :value="provinceIndex" :range="province" range-key="name" @change="handleProvinceChange">
						<uni-easyinput class="disable-input" v-model="formData.province" disabled placeholder="请选择省份"
							:styles="inputStyles" />
					</picker>
				</uni-forms-item>
				<uni-forms-item name="city" label="城市:" v-show="formData.province">
					<picker :value="citiesIndex" :range="cities" range-key="name" @change="handleCityChange">
						<uni-easyinput class="disable-input" v-model="formData.city" disabled placeholder="请选择城市"
							:styles="inputStyles" />
					</picker>
				</uni-forms-item>
				<uni-forms-item name="county" label="区县:" v-show="formData.city">
					<picker :value="countiesIndex" :range="counties" range-key="name" @change="handleCountyChange">
						<uni-easyinput class="disable-input" v-model="formData.county" disabled placeholder="请选择区县"
							:styles="inputStyles" />
					</picker>
				</uni-forms-item>
				<uni-forms-item name="detailAddress" label="详细地址:">
					<uni-easyinput v-model="formData.detailAddress" placeholder="请输入详细地址" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="isDefault" label="设为默认:">
					<switch :checked="formData.isDefault" @change="handleSwithChange" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn-submit" @click="handleSave">提交</button>
		</view>
	</view>
</template>

<script>
	import addressApi from '../../api/avatar/avatar.js'
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				provinceIndex: -1,
				citiesIndex: -1,
				countiesIndex: -1,
				cities: [],
				counties: [],
				formData: {
					addressName: '',
					addressPhone: '',
					province: '',
					city: '',
					county: '',
					detailAddress: '',
					isDefault: true,
				},
				inputStyles: {
					borderColor: '#8be627',
				},
				// 校验规则
				rules: {
					addressName: {
						rules: [{
							required: true,
							errorMessage: '联系人不能为空'
						}]
					},
					addressPhone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					province: {
						rules: [{
							required: true,
							errorMessage: '省份不能为空'
						}]
					},
					city: {
						rules: [{
							required: true,
							errorMessage: '城市不能为空'
						}]
					},
					county: {
						rules: [{
							required: true,
							errorMessage: '区县不能为空'
						}]
					},
					detailAddress: {
						rules: [{
							required: true,
							errorMessage: '详细地址不能为空'
						}]
					},
				},
			}
		},
		onLoad(opt) {
			this.setProvince()
			this.setCity()
			this.setCounty()
		},
		computed: {
			...mapState('address', ['province', 'city', 'county']),
		},
		watch: {
			formData: {
				handler(val) {
					if (val.province) {
						this.setIndex(this.province, 'provinceIndex', val.province)
					}
					if (val.city) {
						this.setIndex(this.cities, 'citiesIndex', val.city)
					}
					if (val.county) {
						this.setIndex(this.counties, 'countiesIndex', val.county)
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			setIndex(arr, index, name) {
				arr.some((item, i) => {
					if (item.name == name) {
						this[index] = i
						return true
					}
				})
			},
			handleSwithChange(e) {
				this.formData.isDefault = e.detail.value
			},
			handleCityChange(e) {
				this.citiesIndex = e.detail.value
				this.formData.city = this.cities[e.detail.value].name
				this.counties = this.county.filter(item => this.cities[this
					.citiesIndex + 1].id == item.pid)
			},
			handleCountyChange(e) {
				this.countiesIndex = e.detail.value
				this.formData.county = this.counties[this.countiesIndex].name
			},
			handleProvinceChange(e) {
				this.provinceIndex = e.detail.value
				this.formData.province = this.province[this.provinceIndex].name
				this.cities = this.city.filter(item => this.province[this
						.provinceIndex].id == item
					.pid)
			},
			...mapActions('address', ['setAddressList', 'setProvince', 'setCity', 'setCounty']),
			handleSave() {
				this.$refs['form'].validate().then((res) => {
					addressApi.addAddress(this.formData).then(res => {
						if (res.code == 200) {
							this.setAddressList()
							if (getCurrentPages().length > 1) {
								uni.navigateBack()
							} else {
								uni.navigateTo({
									url: '/pages/avatar/address'
								})
							}
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-info {
		::v-deep .uni-input-input:disabled {
			color: black;
		}

		width: 100vw;
		height: calc(100vh - 90rpx);
		background-size: cover;
		background-color: $uni-bg-color;

		.address-form {
			padding: 20rpx;

			.btn-submit {
				background-color: $uni-primary;
				color: $uni-white;
			}
		}

	}
</style>